import { NButton, NTag } from 'naive-ui'
import { Directive, DirectiveArguments, h, resolveDirective, withDirectives } from 'vue';
import { statusMapText, statusMapTag } from "../../../utils/enum";

interface Columns {
    updateFn: Function,
    deleteFn: Function
}

export interface FormType {
    id?: string | number,
    userName: string,
    account: string,  // 账号
    password?: string,
    roleIds: [],
    status: 1101 | 1102  // 1101启用 1102禁用
    avatar: string
}


export const tableColumns = ({ updateFn, deleteFn }: Columns) => {
    return [
        {
            title: '创建时间',
            key: 'createdAt',
            width: '200',
            align: 'center'
        },
        {
            title: '用户名称',
            key: 'userName',
            width: '250',
            align: 'center'
        },
        {
            title: '用户角色',
            key: 'menu',
            align: 'center',
            render(row: any) {
                return row.roles.map((role: any) => {
                    return h(
                        NTag,
                        {
                            style: { 'margin-right': '10px' },
                            type: statusMapTag(role.status)
                        },
                        { default: () => role.label }
                    )
                })
            }
        },
        {
            title: '用户状态',
            key: 'status',
            width: '150',
            align: 'center',
            render(row: any) {
                return h(
                    NTag,
                    {
                        type: statusMapTag(row.status)
                    },
                    { default: () => statusMapText(row.status) }
                )
            }
        },
        {
            title: '最近登录时间',
            key: 'loginTime',
            width: '200',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: '200',
            key: 'actions',
            render(row: any) {
                const auth: Directive | undefined = resolveDirective('auth');
                return [
                    withDirectives(h(
                            NButton,
                            { type: 'warning', ghost: true, onClick: () => updateFn(row) },
                            { default: () => '编辑' }),
                        <DirectiveArguments> [[auth, 'system-user-update']]),
                    withDirectives(h(
                            NButton,
                            { style: { 'margin-left': '10px' }, type: 'error', ghost: true, onClick: () => deleteFn(row) },
                            { default: () => '删除' }),
                        <DirectiveArguments> [[auth, 'system-user-delete']])
                ]
            }
        }
    ]
}

export const baseForm = (): FormType => ({
    userName: '',
    account: '',
    password: 'lzz',// 名称
    avatar: '',
    roleIds: [],
    status: 1101
})


// 表单校验
export const formRules = {
    userName: {
        required: true,
        message: '请输入用户名'
    },
    account: {
        required: true,
        message: '请输入用户账号'
    },
    password: {
        required: true,
        message: '请输入用户密码'
    },
    roleIds: {
        required: true,
        message: '请选择用户角色'
    },
    status: {
        required: true,
        message: '请选择用户状态'
    }
}


